<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="更新客户案例">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="18">
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="form.name" name="name">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="18">
            <el-form-item label="图片" prop="logo">
              <avatar v-model="form.logo"></avatar>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="公司logo" prop="logo">
              <avatar v-model="form.companyLogo"></avatar>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="案例分类" prop="exampleCatalog">
              <el-select style="width: 100%;" v-model="form.exampleCatalog" filterable clearable
                         placeholder="请选择">
                <el-option v-for="item in exampleCatalogOptions" :key="item.id"
                           :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="18">
            <el-form-item label="介绍" prop="introduce">
              <el-input v-model="form.introduce" name="introduce">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="18">
            <el-form-item label="排序号" prop="sortNum">
              <el-input-number v-model="form.sortNum" name="sortNum" :min="0" :max="9999999"
                               style="width: 100%;"></el-input-number>
            </el-form-item>

          </el-col>
          <el-col :span="18">
            <el-form-item label="在线地址" prop="url">
              <el-input v-model="form.url" name="url">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="18">
            <div style="margin-left: 160px;">
              <sc-editor v-model="form.note" placeholder="请输入" style="width: 100%;" :height="400"></sc-editor>
            </div>

          </el-col>

          <el-col :span="22">
            <el-form-item>
              <el-button @click="goBack">取消</el-button>
              <el-button type="primary" @click="updateData">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {defineAsyncComponent} from "vue";

const scEditor = defineAsyncComponent(() => import('@/components/scEditor/index.vue'));
import avatar from "@/components/avatar.vue";
import {ref} from "vue";
import {useData} from "@/utils/useData";
import {useUpdate} from "@/uses/useUpdate";

const form = ref({
  name: '',
  logo: '',
  companyLogo:"",
  exampleCatalog: '',
  introduce: '',
  sortNum: '',
  url: '',
  note: ''
})

const rules = ref({
  name: [
    {required: true, message: '请输入客户名称', trigger: 'blur'}
  ],
})

const ruleForm = ref(null);
const {listData: exampleCatalogOptions} = useData("/exampleCatalog/list")

const {updateData, goBack} = useUpdate("example", form, ruleForm)

</script>

<style scoped>

</style>
